
import React from "react"

import ReactDOM from "react-dom/client"
let root = ReactDOM.createRoot(document.getElementById('root'))

// jsx列表渲染
//  用的map方法
// 渲染时，被渲染的标签，一定要加key属性，属性值是独一无二的，一般用id
// 注意：
// 1、key在html结构中看不到 ，是React内部结构优化时用的
// 2、key的值保证唯一，且存在
// 3、推荐是用id作为key的属性值
let data = [
    {
        id: 1,
        name: '张三',
        sex: '男'
    },
    {
        id: 2,
        name: '李四',
        sex: '男'
    },
    {
        id: 3,
        name: '王五',
        sex: '男'
    },
    {
        id: 4,
        name: '赵六',
        sex: '男'
    }
]
let pp = (
    <div>
        <h1>jsx列表渲染</h1>
        {data.map(item=><div key={item.id}>大家好，我叫{item.name},我是{item.sex}生</div>)}
        <hr></hr>
        <ul>
            {data.map(item=><li key={item.id}>大家好，我叫{item.name},我是{item.sex}生</li>)}
        </ul>
    </div>
)

root.render(pp)